// The Application
// ---------------

// Our overall **AppView** is the top-level piece of UI.
Todo.View.App = Backbone.View.extend({

    // Instead of generating a new element, bind to the existing skeleton of
    // the App already present in the HTML.
    el            : $("#todoapp"),

    // Our template for the line of statistics at the bottom of the app.
    statsTemplate : _.template($('#stats-template').html()),

    // Delegated events for creating new items, and clearing completed ones.
    events        : {
        "keypress #new-todo"    : "createOnEnter",
        "click #clear-completed": "clearCompleted",
        "click #toggle-all"     : "toggleAllComplete"
    },

    // At initialization we bind to the relevant events on the `Todos`
    // collection, when items are added or changed. Kick things off by
    // loading any preexisting todos that might be saved in *localStorage*.
    initialize    : function () {

        this.input = this.$("#new-todo");
        this.allCheckbox = this.$("#toggle-all")[0];

        Todo.items.on('add', this.addOne, this);
        Todo.items.on('reset', this.addAll, this);
        Todo.items.on('all', this.render, this);

        this.footer = this.$('footer');
        this.main = $('#main');

        Todo.items.fetch();
    },

    // Re-rendering the App just means refreshing the statistics -- the rest
    // of the app doesn't change.
    render        : function () {
        var completed = Todo.items.completed().length;
        var remaining = Todo.items.remaining().length;

        if (Todo.items.length) {
            this.main.show();
            this.footer.show();
            this.footer.html(this.statsTemplate({completed: completed, remaining: remaining}));
        } else {
            this.main.hide();
            this.footer.hide();
        }

        this.allCheckbox.checked = !remaining;
    },

    // Add a single todo item to the list by creating a view for it, and
    // appending its element to the `<ul>`.
    addOne        : function (todo) {
        var view = new Todo.View.Item({model: todo});
        this.$("#todo-list").append(view.render().el);
    },

    // Add all items in the **Todos** collection at once.
    addAll        : function () {
        Todo.items.each(this.addOne);
    },

    // If you hit return in the main input field, create new **Todo** model,
    // persisting it to *localStorage*.
    createOnEnter : function (e) {
        if (e.keyCode != 13) return;
        if (!this.input.val()) return;

        Todo.items.create({name: this.input.val()});
        this.input.val('');
    },

    // Clear all completed todo items, destroying their models.
    clearCompleted: function () {
        _.invoke(Todo.items.completed(), 'destroy');
        return false;
    },

    toggleAllComplete: function () {
        var completed = this.allCheckbox.checked;
        Todo.items.each(function (todo) {
            todo.save({'completed': completed});
        });
    }
});